<template>
    <div class="pagination-container">
      <!-- 分页组件 -->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="layout"
        :background="background"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script>
  export default {
    name: 'Pagination',
    props: {
      // 当前页码（父组件传入，支持.sync修饰符双向绑定）
      currentPage: {
        type: Number,
        required: true,
        default: 1
      },
      // 每页条数（父组件传入，支持.sync修饰符双向绑定）
      pageSize: {
        type: Number,
        required: true,
        default: 10
      },
      // 总条数（必传）
      total: {
        type: Number,
        required: true,
        default: 0
      },
      // 每页显示条数的可选值
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 50, 100]
        }
      },
      // 分页布局（默认包含：总数、每页条数选择、当前页、页码列表、前往）
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      // 是否显示背景
      background: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      // 每页条数改变时触发
      handleSizeChange(val) {
        // 当每页条数改变时，重置为第1页
        this.$emit('update:currentPage', 1)
        // 通知父组件更新每页条数
        this.$emit('update:pageSize', val)
        // 触发父组件的分页查询事件
        this.$emit('paginationChange', { currentPage: 1, pageSize: val })
      },
      // 当前页码改变时触发
      handleCurrentChange(val) {
        // 通知父组件更新当前页码
        this.$emit('update:currentPage', val)
        // 触发父组件的分页查询事件
        this.$emit('paginationChange', { currentPage: val, pageSize: this.pageSize })
      }
    }
  }
  </script>
  
  <style scoped>
  .pagination-container {
    margin: 15px 0;
    text-align: right; /* 靠右显示，可根据需求调整 */
  }
  </style>